<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Lazy 负载均衡管理 | 登录</title>
    {% load staticfiles %}
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static "dist/css/font-awesome.min.css" %}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{% static "dist/css/ionicons.min.css" %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static "dist/css/AdminLTE.min.css" %}">
    <!-- iCheck -->
    <link rel="stylesheet" href="{% static "plugins/iCheck/square/blue.css" %}">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="/dashboard/"><b>Lazy </b>负载均衡管理</a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <p class="login-box-msg">请输入您的用户名密码以便认证您的身份</p>
            {% if form.errors %}
            <div class="alert alert-warning alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <span><i class="icon fa fa-warning"></i> <b>请检查您的用户名或密码</b></span>
            </div>
            {% endif %}

            <form action="/login/" method="post">
                {% csrf_token %}
                <div class="form-group has-feedback">
                    <input name="username" type="text" class="form-control" placeholder="用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input name="password" type="password" class="form-control" placeholder="密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <!-- <div class="checkbox icheck">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div> -->
                    </div>
                    <div class="col-xs-4">
                        <button type="submit" value="login" class="btn btn-primary btn-block btn-flat">登录</button>
                        <input type="hidden" name="next" value="{{ next }}" />
                    </div>
                </div>
            </form>
            <div class="text-center">
                <a href="http://www.ichegg.org" target="_blank">www.ichegg.org</a>
            </div>
        </div>
    </div>

    <!-- jQuery 2.2.3 -->
    <script src="{% static "plugins/jQuery/jquery-2.2.3.min.js" %}"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>
    <!-- iCheck -->
    <script src="{% static "plugins/iCheck/icheck.min.js" %}"></script>
    <script>
    $(function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
    </script>
</body>

</html>
